<template>
  <div class="header">
  <van-nav-bar >
  <template #left>
    <van-icon name="/logo1.png" size='35'/>
  </template>
  <template #title>
    <van-search v-model="value" placeholder="请输入搜索关键词" @click="search"  @search="searchvalue"/>
  </template>
  <template #right>
    <!-- 傻了早上弄这个搜索的时候把下面的click改了叫searchvlaue -->
    <van-icon name="wap-home" size='35' @click="show=true" />
    <van-popup v-model="show"  
    position="right" 
    :style="{ height: '100%' }">
      <div class="right_nav" >
        <div class="rightNavlogo">
          <img src="/rightNavlogo.png" alt="">
        </div>
        <div v-for="(item,index) in items" :key="index" @click='clickpath(item.routeName)'>{{item.title}}</div>
        <!-- <div style="border-top: 1px solid white;" class="cur">首页</div> -->
        <!-- <div>车展指南</div>
        <div>车展活动</div>
        <div>车展票务</div>
        <div>往期回顾</div>
        <div>下载中心</div>
        <div>观众预登记</div> -->
      </div>
    </van-popup>
  </template>
</van-nav-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data:null,
      value:"",
      show:false,
      items:[
        {title:'首页',routeName:'Home'},
        {title:'新闻中心',},
        {title:'车展指南',},
        {title:'车展活动',},
        {title:'车展票务',},
        {title:'往期回顾',},
        {title:'下载中心',},
        {title:'观众预登记'}
        ]
    }
  },
  methods: {
    clickpath(name){
      if (this.$route.name != name) {
        this.$router.push({
          name: name
        })
      }
    },
    //点击搜索框跳转
    search(){
      //判断当前页面不在搜索页时跳转到search页
      if (this.$route.name != 'Search') {
        this.$router.push('search')
      }
    },
    searchvalue(){
      //回车传入输入的关键词  获取数据库相关数据
      let url=`/api/admin/search?value=${this.value}`
      this.axios.get(url).then(res=>{
        this.data=res.data.data;
        //console.log(res, "data");
        //console.log(this.data);
        this.parentdata()
      })
    },
    //子父传参把获取到的数据传给搜索页渲染
    parentdata(){
      //子父传参的方法叫$emit需要二个参数  
      //第一个是方法名  需要跟父组件中定义的一样
      //第二个参数是传出去的数据//本地data
      //传了一个数组数据给父组件
      this.$emit('change',this.data)
    }
  },
}
</script>
<style  scope lang='scss'>
.van-search{
  width: 300px;
}
.van-icon__image {
  margin-top:5px ;
}
.right_nav{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  color: #a9a9a9;
  text-align: left;
  div{
    padding: 13px 26px ;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid white;
    cursor: pointer;
  }
}
.van-overlay {
    background-color: rgba(0,0,0,0.3) !important;
}
</style>